@charset "UTF-8";
@import url("//at.alicdn.com/t/font_399131_qq3ppyyxz17qr529.css");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, header, nav, section, article, footer, figure, figcaption, aside { margin: 0; padding: 0; }

body { background-color: #fff; font-size: 14px; font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif; }

header, nav, section, article, footer, figure, figcaption, aside { display: block; }

td, th, caption { font-size: 14px; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

a, a:hover { text-decoration: none; }

img { border: none; }

ol, ul, li { list-style: none; }

input, textarea, select, button { font-size: 14px; font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif; outline: 0; }

table { border-collapse: collapse; }

html { overflow: hidden; }

.submit p.turnErr { animation: turnErr 1.5s forwards; -moz-animation: turnErr 1.5s forwards; /* Firefox */ -webkit-animation: turnErr 1.5s forwards; /* Safari and Chrome */ -o-animation: turnErr 1.5s forwards; /* Opera */ }

@keyframes turnErr { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #FC6300; }
  80% { top: -100%;
    background-color: #FC6300; }
  100% { top: 0;
    background-color: #23a8f5; } }

@-webkit-keyframes turnErr { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #FC6300; }
  80% { top: -100%;
    background-color: #FC6300; }
  100% { top: 0;
    background-color: #23a8f5; } }

@-moz-keyframes turnErr { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #FC6300; }
  80% { top: -100%;
    background-color: #FC6300; }
  100% { top: 0;
    background-color: #23a8f5; } }

@-o-keyframes turnErr { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #FC6300; }
  80% { top: -100%;
    background-color: #FC6300; }
  100% { top: 0;
    background-color: #23a8f5; } }

.submit p.turnSuccess { animation: turnSuccess 1.5s forwards; -moz-animation: turnSuccess 1.5s forwards; -webkit-animation: turnSuccess 1.5s forwards; -o-animation: turnSuccess 1.5s forwards; }

@keyframes turnSuccess { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #449D44; }
  80% { top: -100%;
    background-color: #449D44; }
  100% { top: 0;
    background-color: #23a8f5; } }

@-webkit-keyframes turnSuccess { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #449D44; }
  80% { top: -100%;
    background-color: #449D44; }
  100% { top: 0;
    background-color: #23a8f5; } }

@-moz-keyframes turnSuccess { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #449D44; }
  80% { top: -100%;
    background-color: #449D44; }
  100% { top: 0;
    background-color: #23a8f5; } }

@-o-keyframes turnSuccess { 0% { top: 0;
    background-color: #23a8f5; }
  20% { top: -100%;
    background-color: #449D44; }
  80% { top: -100%;
    background-color: #449D44; }
  100% { top: 0;
    background-color: #23a8f5; } }

.joModal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); text-align: center; z-index: 1040; display: none; }

.joModal-dialog { width: 100%; height: 100%; }

.joModal-content { width: 442px; height: 204px; margin-left: auto; margin-right: auto; background-color: #fff; border-radius: 4px; box-shadow: 0 0 20px #000; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); overflow: hidden; }

.joModal-header { width: 100%; }

.joModal-header .title { height: 40px; line-height: 40px; background-color: #f2f2f2; font-size: 16px; }

.joModal-body .text-tip { height: 127px; line-height: 127px; font-size: 16px; }

.joModal-footer { width: 100%; }

.joModal-footer .modal-btn { display: inline-block; width: 115px; height: 38px; line-height: 38px; border-radius: 4px; margin-left: 12px; margin-right: 12px; cursor: pointer; }

.joModal-footer .modal-btn:hover { opacity: 0.8; }

.joModal-footer .cancel { color: #333; background-color: #d7d7d7; margin-left: 94px; }

.joModal-footer .confirm { color: #fff; background-color: #23a8f5; }

[data-liffect="slideTop"] { opacity: 0; position: relative; animation: slideTop 400ms ease forwards; -webkit-animation: slideTop 400ms ease forwards; -moz-animation: slideTop 400ms ease forwards; -o-animation: slideTop 400ms ease forwards; }

@-webkit-keyframes slideTop { 0% { opacity: 0;
    top: -50%; }
  100% { opacity: 1;
    top: 50%; } }

@-moz-keyframes slideTop { 0% { opacity: 0;
    top: -50%; }
  100% { opacity: 1;
    top: 50%; } }

@-o-keyframes slideTop { 0% { opacity: 0;
    top: -50%; }
  100% { opacity: 1;
    top: 50%; } }

@keyframes slideTop { 0% { opacity: 0;
    top: -50%; }
  100% { opacity: 1;
    top: 50%; } }

[data-liffect="fadeIn"] { opacity: 0; animation: fadeIn 400ms ease forwards; -webkit-animation: fadeIn 400ms ease forwards; -moz-animation: fadeIn 400ms ease forwards; -o-animation: fadeIn 400ms ease forwards; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

/*unit*/
.err { display: block; width: 100%; text-align: left; color: red; padding-top: 3px; }

.err i { margin-right: 5px; }

.errBorder { border: 1px solid red !important; box-shadow: none !important; }

textarea { resize: none; outline: 0; }

input { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

input:focus { border-color: #23a8f5; box-shadow: 0 0 3px #23a8f5; }

.input-icon { position: relative; white-space: nowrap; }

.input-icon input[type="text"] + i { position: absolute; top: 50%; margin-top: -14px; right: 15px; font-size: 20px; color: #999; }

.input-icon input[type="text"] + i:hover { color: #23a8f5; cursor: pointer; }

.pagination { width: auto; height: 30px; line-height: 30px; text-align: center; }

.pagination a { margin-left: 10px; }

.pagination input { margin-left: 10px; width: 60px; height: 30px; border: 1px solid #999; text-align: center; padding: 0 10px; }

.pagination input:focus { border-color: #23a8f5; box-shadow: 0 0 3px #23a8f5; }

/*----------------------------------- header (include user message) 头部样式 包含用户头像和账户显示 -----------------------------------*/
.header { width: 100%; height: 60px; /* position:fixed; top:0; left:0; background-color:$white;*/ border-bottom: 1px solid #e4e4e4; overflow: hidden; }

.header .avatar { height: 100%; padding: 10px 50px 10px 0; line-height: 40px; float: right; box-sizing: border-box; }

.header .avatar span { display: inline-block; width: 40px; height: 40px; font-size: 18px; text-align: center; color: #fff; background-color: #23a8f5; }

.header .avatar span, .header .avatar .user-pic { border-radius: 50%; }

.header .avatar .avatar_show { margin-left: 10px; }

/*----------------------------------- left-aside(nav & logo) 左栏样式 包含导航和logo的样式 -----------------------------------*/
.left-aside { width: 180px; height: 100%; position: fixed; left: 0; top: 0; background-color: #2f2f2f; z-index: 99; }

.left-aside .logo { display: block; width: 180px; height: 60px; background-color: #fff; }

.left-aside .navbar { height: 100%; }

ul.menu { width: 100%; min-height: 100%; margin-bottom: 1px; padding-top: 15px; box-sizing: border-box; }

ul.menu li { width: 100%; color: #eff0f4; box-sizing: border-box; }

ul.menu li a { width: 100%; height: 32px; line-height: 32px; padding-left: 30px; padding-right: 30px; display: block; cursor: pointer; color: #fff; position: relative; box-sizing: border-box; }

ul.menu li a > i:first-child { position: relative; top: 1px; }

ul.menu li a:hover { color: #23a8f5; background-color: rgba(255, 255, 255, 0.3); }

ul.menu li a:hover > i.right-arrow { display: block; }

ul.menu li a span { margin-left: 8px; letter-spacing: 1px; }

ul.menu li .right-arrow { font-size: 14px; position: absolute; right: 20px; top: 0; display: none; }

ul.menu li > ul { background-color: #2F2F2F; display: none; }

ul.menu li .rotate { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); }

ul.menu .active { color: #23a8f5; background-color: rgba(255, 255, 255, 0.3); }

ul.menu .active i.right-arrow { display: block; }

/*------------------------------------
 * main (header & content)
 * 右栏页面架构主要样式
 * 包含头部和内容
-------------------------------------*/
.main { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; position: fixed; left: 0; top: 0; }

.main .main-wrapper { width: 100%; height: 100%; }

.main .content { width: 100%; min-height: 100%; padding: 20px; margin-bottom: 1px; box-sizing: border-box; background: #eff0f4; }

.main .content .container { width: 100%; background-color: #fff; border: 1px solid #e4e4e4; padding: 0; margin: 0; }

/*------------------------------------------------- container 正文内容样式 -------------------------------------------------*/
.con-header { height: 42px; line-height: 42px; border-bottom: 1px solid #e4e4e4; }

.folderbar { padding-left: 20px; }

.folderbar a { color: #23a8f5; float: left; padding: 0 10px; position: relative; }

.folderbar a:before { display: block; content: "/"; color: #23a8f5; position: absolute; left: -2px; }

.folderbar a:first-child::before { content: ""; }

.folderbar a:nth-child(2)::before { content: "|"; }

.folderbar a:last-child { color: #333; cursor: text; }

.con-body { padding: 20px; }

.con-footer { width: 100%; }

.input-row { margin-top: 20px; height: 36px; line-height: 36px; }

.input-row:after { display: block; content: ""; height: 0; clear: both; }

.input-row label { display: inline-block; letter-spacing: 1px; float: left; }

.input-row label > span { display: inline-block; width: 90px; }

.input-row input { width: 360px; height: 36px; line-height: 36px; border: 1px solid #c9c9c9; border-radius: 4px; margin: 0; float: left; }

.input-row input:focus { border-color: #23a8f5; box-shadow: 0 0 3px #23a8f5; }

.select { position: relative; }

.select:after { content: "▼"; color: #999; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }

.select select { width: 360px; height: 36px; line-height: 36px; padding-left: 20px; padding-right: 20px; border: 1px solid #c9c9c9; border-radius: 4px; /*很关键：将默认的select选择框样式清除*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.select select:focus { border-color: #23a8f5; box-shadow: 0 0 3px #23a8f5; }

.submit { width: 120px; height: 41px; border-radius: 4px; border: 0; outline: 0; background-color: #23a8f5; color: #fff; margin-top: 20px; position: relative; left: 90px; overflow: hidden; cursor: pointer; }

.submit .btn-text { width: 100%; position: absolute; top: 0; left: 0; }

.submit .btn-text span { display: block; width: 100%; height: 41px; line-height: 41px; text-align: center; }

.submit .btn-text span i { font-size: 21px; }
